import { DialogBase } from '../dialogBase';
import { Loading } from '../loading/loading';
import { waitingStyle } from './waiting.css';

let waitingCount = 0;

class WaitingBox extends DialogBase<WaitingBox> {
	get panel(): HTMLElement {
		return this.el.querySelector(':scope>div') as HTMLDivElement;
	}
	protected render(): Node {
		return (
			<div class={waitingStyle}>
				<div tabIndex={0}>
					<Loading />
				</div>
			</div>
		);
	}
}

let inst: WaitingBox | null = null;

export const Waiting = {
	show(delay = 0) {
		if (waitingCount === 0) {
			waitingCount = 1;
			inst = new WaitingBox({});
			inst.show({ delay });
		} else {
			waitingCount++;
		}
	},
	close() {
		if (waitingCount > 0) {
			waitingCount--;
			if (waitingCount === 0) {
				inst?.close();
				inst = null;
			}
		}
	},
};
